import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import IconFont from '@/assets/Iconfont';
import cssModule from './index.module.scss';

/**
 * @description 自定义导航栏
 * @author Shawn
 */

// 组件接收的参数
interface NavigationBarProps {
  title?: string; // 导航栏标题
  showBack?: boolean; // 是否显示返回按钮
  centerTitle?: boolean; // 标题是否居中
}

export default function Navigation({
  title = '',
  showBack = false,
  centerTitle = false,
}: NavigationBarProps) {
  // 获取状态栏高度
  const statusBarHeight = Taro.getSystemInfoSync().statusBarHeight || 0;

  // 返回按钮点击事件
  const handleBack = () => {
    const pages = Taro.getCurrentPages();
    if (pages.length > 1) {
      Taro.navigateBack();
    } else {
      Taro.reLaunch({
        url: '/pages/index/index'
      });
    }
  };

  return (
    <View style={{ paddingTop: `${statusBarHeight}px` }} className={cssModule.container}>
      <View className={cssModule.navbar}>
        {showBack && (
          <View onClick={handleBack}>
            <IconFont name='arrowleft' size={36} />
          </View>
        )}
        <View
          className={
            centerTitle
              ? `${cssModule.title} ${cssModule.centerTitle} ${showBack ? cssModule.centerTitleWithBack : ''}`
              : cssModule.title
          }
        >
          {title}
        </View>
      </View>
    </View>
  );
}
